<template>
  <view class="content">
	  <view class="head" >
	  	<image class="logo" src="../../static/iconfont/header.png"></image>
	  	<view class="head_text">{{name}}</view>
	  	<view class="head_date">服务续费日期：{{date_due}}</view>
	  </view>
	  <uni-card
	  	    title="交易支付" 
	  	    mode="basic" 
	  	    :is-shadow="true" 
			class="paypal"
	  	>
	  	<view>
	  		<image class="iconfont_ext" src="../../static/iconfont/短信1.png"></image>
			<text class="paypal_text">短信剩余条数</text>
			<view class="paypal_value">
				<text>1000条</text>
				<image class="paypal_fuhao" src="../../static/iconfont/三角.png"></image>
			</view>
	  	</view>
		<view>
			<image class="iconfont_ext" src="../../static/iconfont/待支付.png"></image>
			<text class="paypal_text">合作商返点待支付</text>
			<view class="paypal_value">
				<text>-2850元</text>
				<image class="paypal_fuhao" src="../../static/iconfont/三角.png"></image>
			</view>
		</view>
		<view>
			<image class="iconfont_ext" src="../../static/iconfont/待支付1.png"></image>
			<text class="paypal_text">业务代理返现待支付</text>
			<view class="paypal_value">
				<text>-2850元</text>
				<image class="paypal_fuhao" src="../../static/iconfont/三角.png"></image>
			</view>
		</view>
	  </uni-card>
	  <uni-card
	  	    title="基本信息" 
	  	    mode="basic" 
	  	    :is-shadow="true" 
	  			class="paypal"
	  	>
	  	<view>
	  		<image class="iconfont_ext" src="../../static/iconfont/logo.png"></image>
	  			<text class="paypal_text">修改商铺Logo</text>
	  			<view class="paypal_value">
	  				<image class="paypal_fuhao" src="../../static/iconfont/三角.png"></image>
	  			</view>
	  	</view>
	  		<view>
	  			<image class="iconfont_ext" src="../../static/iconfont/地址.png"></image>
	  			<text class="paypal_text">商铺地址</text>
	  			<view class="paypal_value">
	  				<image class="paypal_fuhao" src="../../static/iconfont/三角.png"></image>
	  			</view>
	  		</view>
	  		<view>
	  			<image class="iconfont_ext" src="../../static/iconfont/简介.png"></image>
	  			<text class="paypal_text">商铺简介</text>
	  			<view class="paypal_value">
	  				<image class="paypal_fuhao" src="../../static/iconfont/三角.png"></image>
	  			</view>
	  		</view>
			<view>
				<image class="iconfont_ext" src="../../static/iconfont/图片列表.png"></image>
				<text class="paypal_text">商铺图片列表</text>
				<view class="paypal_value">
					<image class="paypal_fuhao" src="../../static/iconfont/三角.png"></image>
				</view>
			</view>
	  </uni-card>
	  <uni-card
	  	    title="安全设置" 
	  	    mode="basic" 
	  	    :is-shadow="true" 
	  			class="paypal"
	  	>
	  	<view>
	  		<image class="iconfont_ext" src="../../static/iconfont/修改密码.png"></image>
	  			<text class="paypal_text">修改密码</text>
	  			<view class="paypal_value">
	  				<image class="paypal_fuhao" src="../../static/iconfont/三角.png"></image>
	  			</view>
	  	</view>
		<view>
			<image class="iconfont_ext" src="../../static/iconfont/修改手机号码.png"></image>
			<text class="paypal_text">修改商铺手机号码</text>
			<view class="paypal_value">
				<image class="paypal_fuhao" src="../../static/iconfont/三角.png"></image>
			</view>
		</view>
	  </uni-card>
	  <navigator url="../index/login/login">
		  <button class="bnt_logout">注销</button>
	  </navigator>
	  
	 
  </view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	export default {
		components: {uniCard},
		data() {
			return {
				name: "陵水豪庭假日酒店",
				date_due:"2022-05-06",
			}
		},
		methods: {
			logout(){
				console.log('into login');
				uni.navigateTo({
					url: "abd"
				});
			}
		}
	}
</script>

<style>
	.head{
		background-color: #F0AD4E;
		width: 100%;
		height: 160rpx;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}
	.logo {
		height: 100rpx;
		width: 100rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: auto;
		margin-bottom: auto;
	}
	.head_text{
		float: right;
		margin-top: 50rpx;
		margin-right: 300rpx;
		color: #DD524D;
	}
	.head_date{
		display: flex;
		float: right;
		font-size: 28rpx;
		color: #DD524D;
		margin-top: -15rpx;
		margin-right: 15rpx;
	}
	.paypal{
		color: #007AFF;
	}
	.uni-card{
		margin-top: 10rpx;
		border-radius: 20rpx;
		line-height: 35rpx;
	}
	.iconfont_ext {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		margin: 3px auto;
		line-height: 60rpx;
		color: #FFFFFF; 
		font-size: 40rpx;
		vertical-align: middle;
	}
	.paypal_text{
		font-size: 28rpx;
		margin-left: 20rpx;
		display: inline-block;
	}
	.paypal_value{
		display: inline-block;
		font-size: 28rpx;
		color: #007AFF;
		float: right;
		margin-top: 15rpx;
	}
	.paypal_fuhao{
		width: 40rpx;
		height: 40rpx;
		color: #FFFFFF; 
		font-size: 40rpx;
		vertical-align: middle;
	}
	.bnt_logout{
		width: 300rpx;
		height: 80rpx;
		border-radius: 50rpx;
		background-color: #F0AD4E;
		margin-bottom: 20rpx;
	}
</style>
